<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 光源演示 - 完整分类案例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Three.js 光源演示</h1>
            <p>包含所有主要光源类型、辅助对象、物体和阴影效果</p>
        </header>
        
        <nav class="light-controls">
            <h3>光源控制</h3>
            <div class="control-group">
                <label>
                    <input type="checkbox" id="ambientLight" checked>
                    环境光 (AmbientLight)
                </label>
                <div class="color-control">
                    <input type="color" id="ambientColor" value="#404040">
                    <input type="range" id="ambientIntensity" min="0" max="2" step="0.1" value="0.4">
                </div>
            </div>
            
            <div class="control-group">
                <label>
                    <input type="checkbox" id="directionalLight" checked>
                    方向光 (DirectionalLight)
                </label>
                <div class="color-control">
                    <input type="color" id="directionalColor" value="#ffffff">
                    <input type="range" id="directionalIntensity" min="0" max="3" step="0.1" value="1">
                </div>
            </div>
            
            <div class="control-group">
                <label>
                    <input type="checkbox" id="pointLight" checked>
                    点光源 (PointLight)
                </label>
                <div class="color-control">
                    <input type="color" id="pointColor" value="#ff4444">
                    <input type="range" id="pointIntensity" min="0" max="3" step="0.1" value="1">
                </div>
            </div>
            
            <div class="control-group">
                <label>
                    <input type="checkbox" id="spotLight" checked>
                    聚光灯 (SpotLight)
                </label>
                <div class="color-control">
                    <input type="color" id="spotColor" value="#44ff44">
                    <input type="range" id="spotIntensity" min="0" max="3" step="0.1" value="1">
                </div>
            </div>
            
            <div class="control-group">
                <label>
                    <input type="checkbox" id="hemisphereLight">
                    半球光 (HemisphereLight)
                </label>
                <div class="color-control">
                    <input type="color" id="hemisphereColorSky" value="#87ceeb">
                    <input type="color" id="hemisphereColorGround" value="#8b4513">
                    <input type="range" id="hemisphereIntensity" min="0" max="2" step="0.1" value="0.6">
                </div>
            </div>
            
            <div class="control-group">
                <label>
                    <input type="checkbox" id="rectAreaLight">
                    矩形区域光 (RectAreaLight)
                </label>
                <div class="color-control">
                    <input type="color" id="rectAreaColor" value="#4444ff">
                    <input type="range" id="rectAreaIntensity" min="0" max="10" step="0.5" value="3">
                </div>
            </div>
            
            <div class="control-group">
                <label>
                    <input type="checkbox" id="showHelpers" checked>
                    显示辅助对象
                </label>
            </div>
            
            <div class="control-group">
                <label>
                    <input type="checkbox" id="enableShadows" checked>
                    启用阴影
                </label>
            </div>
            
            <button id="resetLights">重置所有光源</button>
        </nav>
        
        <main>
            <div id="scene-container"></div>
            <div class="info-panel">
                <h3>光源信息</h3>
                <div id="lightInfo">
                    <div class="light-detail">
                        <h4>环境光 (AmbientLight)</h4>
                        <p><strong>特点:</strong> 均匀照亮场景中的所有物体，没有方向性和位置</p>
                        <p><strong>用途:</strong> 提供基础照明，避免场景过暗，模拟环境反射光</p>
                        <p><strong>技术:</strong> 不产生阴影，计算开销最小，通常与其他光源配合使用</p>
                        <p><strong>主要属性:</strong></p>
                        <ul>
                            <li><code>color</code> - 光源颜色 (默认: 0xffffff)</li>
                            <li><code>intensity</code> - 光照强度 (默认: 1.0)</li>
                        </ul>
                        <p><strong>构造函数:</strong> <code>new THREE.AmbientLight(color, intensity)</code></p>
                    </div>
                    
                    <div class="light-detail">
                        <h4>方向光 (DirectionalLight)</h4>
                        <p><strong>特点:</strong> 平行光线，有方向但无位置，光线强度不随距离衰减</p>
                        <p><strong>用途:</strong> 模拟太阳光、月光等远距离光源</p>
                        <p><strong>技术:</strong> 支持阴影投射，使用正交相机计算阴影贴图</p>
                        <p><strong>主要属性:</strong></p>
                        <ul>
                            <li><code>color</code> - 光源颜色 (默认: 0xffffff)</li>
                            <li><code>intensity</code> - 光照强度 (默认: 1.0)</li>
                            <li><code>position</code> - 光源位置，决定光照方向</li>
                            <li><code>target</code> - 目标对象，光线指向目标</li>
                            <li><code>castShadow</code> - 是否投射阴影 (默认: false)</li>
                            <li><code>shadow.mapSize</code> - 阴影贴图尺寸 (影响阴影质量)</li>
                            <li><code>shadow.camera</code> - 阴影相机参数 (near, far, left, right, top, bottom)</li>
                        </ul>
                        <p><strong>构造函数:</strong> <code>new THREE.DirectionalLight(color, intensity)</code></p>
                    </div>
                    
                    <div class="light-detail">
                        <h4>点光源 (PointLight)</h4>
                        <p><strong>特点:</strong> 从一个点向所有方向发射光线，有位置和衰减</p>
                        <p><strong>用途:</strong> 模拟灯泡、蜡烛、火把等点状光源</p>
                        <p><strong>技术:</strong> 支持阴影投射，光强随距离平方衰减，可设置衰减范围</p>
                        <p><strong>主要属性:</strong></p>
                        <ul>
                            <li><code>color</code> - 光源颜色 (默认: 0xffffff)</li>
                            <li><code>intensity</code> - 光照强度 (默认: 1.0)</li>
                            <li><code>distance</code> - 光照距离，0表示无限远 (默认: 0)</li>
                            <li><code>decay</code> - 光照衰减系数 (默认: 2)</li>
                            <li><code>position</code> - 光源在3D空间中的位置</li>
                            <li><code>castShadow</code> - 是否投射阴影 (默认: false)</li>
                            <li><code>shadow.mapSize</code> - 阴影贴图尺寸</li>
                        </ul>
                        <p><strong>构造函数:</strong> <code>new THREE.PointLight(color, intensity, distance, decay)</code></p>
                    </div>
                    
                    <div class="light-detail">
                        <h4>聚光灯 (SpotLight)</h4>
                        <p><strong>特点:</strong> 锥形光束，有位置、方向、角度和边缘衰减</p>
                        <p><strong>用途:</strong> 模拟手电筒、舞台灯光、车灯等定向照明</p>
                        <p><strong>技术:</strong> 支持阴影投射，可调节光锥角度和边缘柔和度</p>
                        <p><strong>主要属性:</strong></p>
                        <ul>
                            <li><code>color</code> - 光源颜色 (默认: 0xffffff)</li>
                            <li><code>intensity</code> - 光照强度 (默认: 1.0)</li>
                            <li><code>distance</code> - 光照距离 (默认: 0)</li>
                            <li><code>angle</code> - 光锥角度，弧度制 (默认: Math.PI/3)</li>
                            <li><code>penumbra</code> - 光锥边缘柔和度 0-1 (默认: 0)</li>
                            <li><code>decay</code> - 光照衰减系数 (默认: 2)</li>
                            <li><code>position</code> - 光源位置</li>
                            <li><code>target</code> - 目标对象，决定光照方向</li>
                            <li><code>castShadow</code> - 是否投射阴影 (默认: false)</li>
                        </ul>
                        <p><strong>构造函数:</strong> <code>new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay)</code></p>
                    </div>
                    
                    <div class="light-detail">
                        <h4>半球光 (HemisphereLight)</h4>
                        <p><strong>特点:</strong> 模拟天空和地面的双色反射光，渐变过渡</p>
                        <p><strong>用途:</strong> 创建自然的户外照明效果，天空盒照明</p>
                        <p><strong>技术:</strong> 不支持阴影，计算高效，适合大范围环境照明</p>
                        <p><strong>主要属性:</strong></p>
                        <ul>
                            <li><code>skyColor</code> - 天空颜色，来自上方的光 (默认: 0xffffff)</li>
                            <li><code>groundColor</code> - 地面颜色，来自下方的光 (默认: 0xffffff)</li>
                            <li><code>intensity</code> - 光照强度 (默认: 1.0)</li>
                            <li><code>position</code> - 光源位置，通常设置在场景上方</li>
                        </ul>
                        <p><strong>构造函数:</strong> <code>new THREE.HemisphereLight(skyColor, groundColor, intensity)</code></p>
                        <p><strong>说明:</strong> 物体上方受天空色影响，下方受地面色影响，中间平滑过渡</p>
                    </div>
                    
                    <div class="light-detail">
                        <h4>矩形区域光 (RectAreaLight)</h4>
                        <p><strong>特点:</strong> 从矩形区域发出的面光源，物理准确的光照</p>
                        <p><strong>用途:</strong> 模拟窗户、显示器、LED面板等面状光源</p>
                        <p><strong>技术:</strong> 不支持阴影，需要特殊着色器支持，渲染开销较大</p>
                        <p><strong>主要属性:</strong></p>
                        <ul>
                            <li><code>color</code> - 光源颜色 (默认: 0xffffff)</li>
                            <li><code>intensity</code> - 光照强度 (默认: 1.0)</li>
                            <li><code>width</code> - 矩形宽度</li>
                            <li><code>height</code> - 矩形高度</li>
                            <li><code>position</code> - 光源位置</li>
                            <li><code>rotation</code> - 光源旋转，控制发光方向</li>
                        </ul>
                        <p><strong>构造函数:</strong> <code>new THREE.RectAreaLight(color, intensity, width, height)</code></p>
                        <p><strong>注意:</strong> 需要导入 RectAreaLightUniformsLib 并初始化才能正常工作</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- Three.js 导入映射 -->
    <script type="importmap">
        {
            "imports": {
                "three": "../three.js/build/three.module.js",
                "three/addons/": "../three.js/examples/jsm/"
            }
        }
    </script>
    <script src="main.js" type="module"></script>
</body>
</html>